<!DOCTYPE html>
<html data-ng-app="samples">
<head>
    <title>AngularJS Demos</title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-responsive.min.css" rel="stylesheet" />
    <link href="Content/styles.css" rel="stylesheet" />
</head>
<body data-ng-controller="samplesController">
    <h2>
        <img src="Content/images/angularShield.png" />ngularJS Demos</h2>
    <div class="row">
        <div class="span4 section">
            <h5>Demos:</h5>
            <ol>
                <li data-ng-repeat="page in pages">
                    <a href="{{href}}" data-ng-click="loadPage(page)">{{ page.title }}</a>
                </li>
            </ol>
        </div>
        <div class="span8">
            <ng-include src="template"></ng-include>
            <!-- <div id="sampleContent"></div> -->
            <br />
            <div class="container">
                <h4>Code:</h4>
                <textarea></textarea>
            </div>
        </div>
    </div>

    <script src="Scripts/jquery.min.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>

    <script>
        var urlBase = '/DemoPartials/';
        var samplesModule = angular.module('samples', []);

        samplesModule.config(function($controllerProvider, $provide) {
            //Used to handle loading controllers dynamically
            samplesModule.controller = $controllerProvider.register;
            samplesModule.factory = $provide.factory;
        });

        samplesModule.controller('samplesController', function ($scope, $templateCache, $http, $location) {
            $scope.template = '';
            $scope.html = '';
            $scope.pages = [
                { title: 'Data binding basics', url: urlBase + '1_Data_binding_basics.html' },
                { title: 'Looping with ng-repeat', url: urlBase + '2_Looping_with_ng-repeat.html' },
                { title: 'Adding a Simple Controller', url: urlBase + '3_Adding_a_Simple_Controller.html' },
                { title: 'Using ng-model and ng-click Directives', url: urlBase + '4_Using_ng-model_and_ng-click_Directives.html' },
                { title: 'Filtering and Sorting Data', url: urlBase + '5_Filtering_and_Sorting_Data.html' },
                { title: 'Adding a Module and Controller', url: urlBase + '6_Adding_a_Module_and_Controller.html' },
                //{ title: 'Adding Module Configuration and Routing', url: urlBase + '7_Adding_Module_Configuration_and_Routing.html' },
                { title: 'Module, Controller and Factory', url: urlBase + '8_Module-Controller-Factory.html' },
                { title: 'Customer Management App', url: 'CustomerManagementApp.html', href: 'CustomerManagementApp.html' },
            ];

            $scope.loadPage = function (page) {
                if (page.href) {
                    document.location = page.href; //Load new page
                }
                $scope.template = page.url;
                $http({ method: 'GET', url: page.url, cache: $templateCache })
                  .success(function (html) {
                      $scope.html = html;
                      $('textarea').text(html); //Had to go with this due to IE
                  })
                  .error(function (html, status) {
                      $scope.html = 'Unable to load code: ' + status;
                  });
            }
        });
    </script>
</body>
</html>
